<template>
	<view class="center">
		<!-- <view class="tit"></view>
		<view class="title">
			<image src="../../../../static/images/arrow_left.png" mode="widthFix" @click="back"></image>
			<text>新增拜访计划</text>
			<view class="ima">
			</view>
		</view> -->
		<hea-ders title="新增拜访计划">
			<image class="left" slot='left' src="@/static/images/arrow_left.png" mode="widthFix" @click="back"></image>
		</hea-ders>
		<view class="name" @click="customer">
			<text>客户名称<text style="color: red;">*</text></text>
			<image src="../../../../static/images/arrow_right.png" mode="widthFix"></image>
		</view>
		<view class="name">
			<text>拜访日期<text style="color: red;">*</text></text>
			<view class="uni-list-cell-db">
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{date}}</view>
				</picker>
			</view>
		</view>
		<view class="name">
			<text>拜访时段<text style="color: red;">*</text></text>
			<view style="width: 20%; ">
				<xfl-select :list="list" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="false" :style_Container="'height: 100%; font-size: 16px;'"
				 :placeholder="'placeholder'" :initValue="'苹果'">
				</xfl-select>
			</view>
		</view>
	<view class="names">
		<text>拜访时段<text style="color: red;">*</text></text>
		<view class="uni-textarea">
		      <textarea placeholder-style="text-align:right;" placeholder="请输入拜访计划内容"/>
		</view>
	</view>
	
	<button class="btn" type="primary"> 保存</button> 
	</view>
</template>

<script>
	import xflSelect from '@/components/xfl-select/xfl-select.vue';
	import heaDers from '@/pages/header/header.vue'
	export default {
		components:{
			heaDers
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				list: [ //要展示的数据
					'苹果',
					{
						value: '香蕉',
						disabled: false
					},
					'葡萄',
					'芒果',
					'大白菜',
				],
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			bindTimeChange: function(e) {
				this.time = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			 bindTextAreaBlur: function (e) {
			 console.log(e.detail.value)
			 },
			 customer(){
				 uni.navigateTo({
				 	url:'../customer/customer'
				 })
			 }
		}
	}
</script>
<style lang="scss" scoped>
	.center {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		background: rgba(245, 245, 245, 1);
		.title {
			width: 100%;
			height: 88rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			background-color: rgba(36, 153, 246, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			image {
				width: 22rpx;
			}

			text {
				font-size: 36rpx;
				color: #fff;
				font-weight: 400;
				font-family: PingFang SC;
			}

			.ima {
				image {
					width: 40rpx;
					margin-left: 5rpx;
				}
			}
		}
		.name {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 88rpx;
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-bottom: 1rpx solid #e0e0e0;

			text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 40rpx;
				color: rgba(66, 66, 66, 1);
				opacity: 1
			}

			image {
				width: 20rpx;
			}

			.uni-list-cell-db {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 40rpx;
				color: rgba(66, 66, 66, 1);
				opacity: 1;
			}
		}
		.names {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-bottom: 1rpx solid #e0e0e0;

		text {
			
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 40rpx;
			color: rgba(66, 66, 66, 1);
			opacity: 1
		}
		.uni-textarea {
			width: 80%;
			textarea{
				padding-right: 30rpx;
				box-sizing: border-box;
			}
		}	
		}
		.btn {
			position: fixed;
			left: 0;
			bottom: 0;
			border-radius: 0;
			width: 100%;
			box-sizing: border-box;
		}
	}
</style>
